<template>
  <div class="styles">
    <SettingBox title="布局">
      <SettingBoxItem label="布局模式">
        <el-radio-group v-model="styles.display">
          <el-radio-button value="inline">
            <el-tooltip content="内联布局" placement="top" effect="light">
              <Icon icon="material-symbols:abc" width="20" />
            </el-tooltip>
          </el-radio-button>
          <el-radio-button value="flex">
            <el-tooltip content="弹性布局" placement="top" effect="light">
              <Icon icon="material-symbols:view-week" width="20" />
            </el-tooltip>
          </el-radio-button>
          <el-radio-button value="block">
            <el-tooltip content="块级布局" placement="top" effect="light">
              <Icon icon="mdi:card" width="20" />
            </el-tooltip>
          </el-radio-button>
          <el-radio-button value="inline-block">
            <el-tooltip content="行内块布局" placement="top" effect="light">
              <Icon icon="ooui:mathematics-display-inline" width="20" />
            </el-tooltip>
          </el-radio-button>
          <el-radio-button value="none">
            <el-tooltip content="隐藏" placement="top" effect="light">
              <Icon icon="ion:eye-off" width="20" />
            </el-tooltip>
          </el-radio-button>
        </el-radio-group>
      </SettingBoxItem>

      <div class="flex">
        <SettingBoxItem label="宽">
          <InputNumber controls-position="right" v-model="styles.width" />
        </SettingBoxItem>
        <SettingBoxItem label="高">
          <InputNumber controls-position="right" v-model="styles.height" />
        </SettingBoxItem>
      </div>

      <div class="flex">
        <SettingBoxItem label="上内边距">
          <InputNumber controls-position="right" v-model="styles.paddingTop" />
        </SettingBoxItem>

        <SettingBoxItem label="下内边距">
          <InputNumber
            controls-position="right"
            v-model="styles.paddingBottom"
          />
        </SettingBoxItem>
      </div>

      <div class="flex">
        <SettingBoxItem label="左内边距">
          <InputNumber controls-position="right" v-model="styles.paddingLeft" />
        </SettingBoxItem>

        <SettingBoxItem label="右内边距">
          <InputNumber
            controls-position="right"
            v-model="styles.paddingRight"
          />
        </SettingBoxItem>
      </div>

      <div class="flex">
        <SettingBoxItem label="上外边距">
          <InputNumber controls-position="right" v-model="styles.marginTop" />
        </SettingBoxItem>

        <SettingBoxItem label="下外边距">
          <InputNumber
            controls-position="right"
            v-model="styles.marginBottom"
          />
        </SettingBoxItem>
      </div>

      <div class="flex">
        <SettingBoxItem label="左外边距">
          <InputNumber controls-position="right" v-model="styles.marginLeft" />
        </SettingBoxItem>

        <SettingBoxItem label="右外边距">
          <InputNumber controls-position="right" v-model="styles.marginRight" />
        </SettingBoxItem>
      </div>
    </SettingBox>

    <SettingBox title="文字">
      <div class="flex">
        <SettingBoxItem label="字号">
          <InputNumber controls-position="right" v-model="styles.fontSize" />
        </SettingBoxItem>

        <SettingBoxItem label="行高">
          <InputNumber controls-position="right" v-model="styles.lineHeight" />
        </SettingBoxItem>
      </div>

      <SettingBoxItem label="字重">
        <el-select placeholder="请选择字重类型" v-model="styles.fontWeight">
          <el-option label="100 Thin" value="100"></el-option>
          <el-option label="200 Extra Light" value="200"></el-option>
          <el-option label="300 Light" value="300"></el-option>
          <el-option label="400 Normal" value="400"></el-option>
          <el-option label="500 Medium" value="500"></el-option>
          <el-option label="600 Semi Bold" value="600"></el-option>
          <el-option label="700 Bold" value="700"></el-option>
          <el-option label="800 Extra Bold" value="800"></el-option>
          <el-option label="900 Black" value="900"></el-option>
        </el-select>
      </SettingBoxItem>

      <SettingBoxItem label="对齐方式">
        <el-radio-group v-model="styles.textAlign">
          <el-radio-button value="left">
            <el-tooltip content="左对齐" placement="top" effect="light">
              <Icon icon="majesticons:text-align-left" width="20" />
            </el-tooltip>
          </el-radio-button>
          <el-radio-button value="center">
            <el-tooltip content="居中对齐" placement="top" effect="light">
              <Icon icon="majesticons:text-align-center" width="20" />
            </el-tooltip>
          </el-radio-button>
          <el-radio-button value="right">
            <el-tooltip content="右对齐" placement="top" effect="light">
              <Icon icon="majesticons:text-align-right" width="20" />
            </el-tooltip>
          </el-radio-button>
          <el-radio-button value="justify">
            <el-tooltip content="两端对齐" placement="top" effect="light">
              <Icon icon="majesticons:text-align-justify" width="20" />
            </el-tooltip>
          </el-radio-button>
        </el-radio-group>
      </SettingBoxItem>

      <SettingBoxItem label="颜色">
        <el-color-picker
          show-alpha
          :predefine="predefineColors"
          v-model="styles.color"
        />
      </SettingBoxItem>

      <SettingBoxItem label="透明度">
        <el-slider :min="0" :max="1" :step="0.1" v-model="styles.opacity" />
      </SettingBoxItem>
    </SettingBox>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";

import useEditorStore from "@/store/modules/editor";
const editorStore = useEditorStore();

const styles = computed(() => editorStore.currentComponent.styles);

defineOptions({
  name: "Styles",
});
// 预定义的颜色
const predefineColors = ref([
  "#ff4500",
  "#ff8c00",
  "#ffd700",
  "#90ee90",
  "#00ced1",
  "#1e90ff",
  "#c71585",
]);
</script>

<style scoped lang="scss">
:deep() {
  .el-radio-button__inner {
    padding: 4px 0;
  }
}

.flex {
  display: flex;
}

.setting-box-item {
  flex: 1;
}

.el-input-number {
  width: 90px;
}

.styles {
  background-color: #fff;
}
</style>
